
<!DOCTYPE html>
<html class="html" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<title>我的工作工具库</title>

</head>
<style type="text/css">
html{height:100%;}
body{margin:0;height:100%;}
td{border:1px solid #333;}
.row{}
.row:before,
.row:after{display:block;content:'';clear:both;float:left;}
.col{float:left;}
</style>
<body>
<a target="_blank" href="http://www.clipboardjs.cn/">clipboardjs</a>


<h1>随便写点什么</h1>
<h3>工具页面</h3>
<ul>
  <li><a href="图片上传操作相关\img2base64.html">img => base64</a></li>
  <li><a href="Object/ruler/index.html">ruler</a></li>
  <li><a href=""></a></li>
  <li><a href="http://lib.sinaapp.com/">经常要用又经常百度找不到的CND</a></li>
</ul>
<div class="row">

  
<script type="text/javascript">
  function FloatToPercent(fDivisor,fDividend,nMantissa,isZoreMantissa){
    //fDivisor:除数,fDividend:被除数,nMantissa:保留几位小数,isZoreMantissa:尾数是否保留零
    //fDivisor:除数,fDividend:被除数
    if(
      isNaN(parseFloat(fDivisor)) ||
      parseFloat(fDivisor)==0 ||
      isNaN(parseFloat(fDividend))
    ){
      return "parameter error";
    }
    var nMantissa = Object.prototype.toString.call(nMantissa)=='[object Number]'?nMantissa:2;
    //nMantissa:保留几位小数，默认保留2位
    var quotient = Math.round(fDividend/fDivisor*Math.pow(10,(nMantissa+2)));
    var isZoreMantissa = Object.prototype.toString.call(isZoreMantissa)=='[object Boolean]'?isZoreMantissa:false;
    //isZoreMantissa:尾数是否保留零，默认为false
    return quotient/100+"%";
  }
  </script>

  <h1>有一段时间写js检测浏览器和显示器尺寸，现在先复制过来，抽空重写一遍，置于首页展示（不怎么重要的地方）</h1>

  <div class="row">
    <div class="col">
      <script type="text/javascript">
        (function(){
          var html = '<table>';
          html += '<caption>window.screen</caption>';
          for(var k in window.screen){
            var cn = {
              availWidth:"除Windows任务栏之外屏幕宽度"
              ,availHeight:"除Windows任务栏之外屏幕高度"
              ,width:"显示器(全屏)宽度"
              ,height:"显示器(全屏)高度"
              ,colorDepth:"调色板的比特深度"
              ,pixelDepth:"颜色分辨率（比特每像素）"
              ,availLeft:"屏幕水平偏移"
              ,availTop:"屏幕垂直偏移"
            }
            var v = window.screen[k];
            if(typeof(v) == "number"){
              html += '<tr><td>'+k+'</td><td>'+cn[k]+'</td><td>'+v+'</td></tr>';
            }else{
              console.table(v)
            }
          }
          html += '</table>';
          document.write(html);
        })();
      </script>
    </div><!--col-->
    <div class="col">
      <script type="text/javascript">
        (function(){
          var objNumberHelpfulWindow = {
            innerHeight:"窗口的文档显示区的高度"
            ,innerWidth:"窗口的文档显示区的宽度"
            ,outerHeight:"窗口的外部高度"
            ,outerWidth:"窗口的外部宽度"
            ,pageXOffset:"设置或返回当前页面相对于窗口显示区左上角的 X 位置"
            ,pageYOffset:"设置或返回当前页面相对于窗口显示区左上角的 Y 位置"
            ,screenLeft:"声明了窗口的左上角在屏幕上的的x坐标(IE,Safari,Opera)"
            ,screenTop:"声明了窗口的左上角在屏幕上的的y坐标(IE,Safari,Opera)"
            ,screenX:"声明了窗口的左上角在屏幕上的的x坐标(Firefox)"
            ,screenY:"声明了窗口的左上角在屏幕上的的y坐标(Firefox)"
          };
          var html = '<table>';
          html += '<caption>window</caption>';
          for(var k in objNumberHelpfulWindow){
            var cn = objNumberHelpfulWindow[k];
            html += '<tr><td>'+k+'</td><td>'+cn+'</td><td>'+eval("window."+k)+'</td></tr>';
          }
          html += '</table>';
          document.write(html);
        })()
      </script>
    </div><!--col-->
  </div><!--row-->
  <div class="row">
    <div class="col">
      <script type="text/javascript">
        (function(){
          var ele = [
            'document.body'
            ,'document.documentElement'
            ,'document.getElementById("cbox")'
            ,'document.getElementById("bbox")'
          ];
          var api = {
            clientHeight:"可见高度"
            ,clientWidth:"可见宽度"
            ,offsetHeight:"高度"
            ,offsetWidth:"宽度"
            ,offsetLeft:"水平偏移位置"
            ,offsetTop:"垂直偏移位置"
            // ,offsetParent:"偏移容器"
          }
          var html = '<table>';
          html += '<thead><tr>'
          html += '<td></td>';
          for(var k in api){
            html += '<td>'+k+'</td>';  
          }
          html += '</tr><tr>';
          html += '<td></td>';
          for(var k in api){
            html += '<td>'+api[k]+'</td>';
          }
          html += '</tr></thead>';
          html += '<tbody></tr>';
          for(var e in ele){
            html += '<tr>'
            html += '<td>'+ele[e]+'</td>';
            for(var a in api){
              html += '<td>'+eval(ele[e]+'.'+a)+'</td>';
            }
            html += '</tr>'
          }
          html += '</table>';
          document.write(html);
        })()
      </script>
    </div><!--col-->
    
  </div><!--row-->
  <div class="row">
    <div class="col">
      <script type="text/javascript">
        function BrowserType(){
          var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
          var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
          var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
          var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
          var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
          var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
          var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
          if(isIE){
            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            if(fIEVersion == 7){ return "IE7";}
            else if(fIEVersion == 8){ return "IE8";}
            else if(fIEVersion == 9){ return "IE9";}
            else if(fIEVersion == 10){ return "IE10";}
            else if(fIEVersion == 11){ return "IE11";}
            else{ return "0"}//IE版本过低
          }//isIE end     
          if (isFF) {  return "FF";}
          if (isOpera) {  return "Opera";}
          if (isSafari) {  return "Safari";}
          if (isChrome) { return "Chrome";}
          if (isEdge) { return "Edge";}
        }//判断浏览器类型
        function getBrowserSize(){
          var vw = window.innerWidth||document.body.clientWidth||document.documentElement.clientWidth;
          var vh = window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight;
          return {
            height:vh
            ,width:vw
          }
        }
        (function(){
          var html = '<table style="background-color:#ffb3b3;">';
          html += '<caption>'+BrowserType()+'</caption>';
          html += '<tr>'+
            '<td>维度</td>'+
            '<td>显示器本体</td>'+
            '<td>浏览器</td>'+
            '<td>相对本体比例</td>'+
            '<td>文档</td>'+
            '<td>相对本体比例</td>'+
          '</tr>';
          html += '<tr>'+
            '<td>宽度width</td>'+
            '<td>'+window.screen.width+'</td>'+
            '<td>'+getBrowserSize().width+'</td>'+
            '<td>'+FloatToPercent(window.screen.width,window.outerWidth,2,true)+'</td>'+
            '<td>'+getBrowserSize().width+'</td>'+
            '<td>'+FloatToPercent(window.screen.width,getBrowserSize().width,2,true)+'</td>'+
          '</tr>';
          html += '<tr>'+
            '<td>高度height</td>'+
            '<td>'+window.screen.height+'</td>'+
            '<td>'+getBrowserSize().height+'</td>'+
            '<td>'+FloatToPercent(window.screen.height,window.outerHeight,2,true)+'</td>'+
            '<td>文档</td>'+
            '<td>'+FloatToPercent(window.screen.height,getBrowserSize().height,2,true)+'</td>'+
          '</tr>';
          html += '</table>';
          document.write(html);
        })()
      </script>
    </div><!--col-->
  </div><!--row-->
</div>
</body>
</html>